<template>
  <div class="add_web">
	  <div class="title">{{ title }}</div>
	  <div class="addWeb_content">
		  <van-cell-group>
			<p class="ftitle">网站名称</p>
			<van-field v-model="webName" placeholder="请输入网站名称" />
			<p class="ftitle">选择网站类型</p>
		    <div>
				<van-tag 
				v-for="(tag,index) in tagType" 
				:key="'tag'+index" 
				:color="curTypeIndex==index ? '#e74c3c':'#ffe1e1'" 
				@click="choseTypeFn(index)"
				:text-color="curTypeIndex==index ? '#fff':'#666'" 
				size="large">{{ tag.name }}</van-tag>
			</div>
			<p class="ftitle">网站URL</p>
			<van-field v-model="webUrl" placeholder="请输入要收藏网站的URL,例如:http://www.baidu.com" />
			<p class="ftitle">本地检索关键字</p>
			<van-field v-model="Keyword" placeholder="请输入本地检索关键字(关键字之间用英文符逗号隔开)" />
		  </van-cell-group>
		  <div class="btn_groups">
			  <van-button @click="setCollectionFn" style="width: 100%;margin: 0;" icon="star-o" type="primary">添加收藏</van-button>
			  <!-- <van-button class="fr" @click="outCollectionFn" icon="upgrade" type="info">导出收藏</van-button> -->
		  </div>
	  </div>
	  
  </div>
</template>

<script>
import { Icon,Button,Field,Tag,Toast } from 'vant'
import { getCollection } from "~js/tools.js"
	
export default {
  name: 'addWeb',
  components:{
  	 [Icon.name]:Icon,
	 [Button.name]:Button,
	 [Field.name]:Field,
	 [Tag.name]:Tag,
	 [Toast.name]:Toast
  },
  data(){
	  return {
		  webName:"",
		  curTypeIndex:0,
		  webUrl:"",
		  Keyword:"",
		  preText:"",
	  }
  },
  props: {
     title:{
		 type:String,
		 default:"添加收藏"
	 },
	 tagType:{
		 type:Array,
		 default:()=>{
			 return []
		 }
	 }
  },
  methods:{
	  choseTypeFn(index){
		  this.curTypeIndex=index
	  },
	  setCollectionFn(){
		  var urlReg=/^(https?:\/\/)/
		  
		  if(!this.webName){
			 Toast('请填写网站名称！');
			 return
		  }
		  if(!this.tagType[this.curTypeIndex].id){
			 Toast('请选择网站类型！');
			 return
		  }
		  if(!this.webUrl || !urlReg.test(this.webUrl)){
			 Toast('请填写正确的网站url地址！');
			 return
		  }
		  if(!this.Keyword){
			 Toast('请填写本地检索关键字！');
			 return
		  }
		  
		  this.$emit('setCollection',{
			  title:this.webName,
			  typeName:this.tagType[this.curTypeIndex].name,
			  type:this.curTypeIndex,
			  url:this.webUrl,
			  icon:"",
			  Keyword:this.Keyword,
		   })
	  }
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.add_web{
	background: rgba(255,255,255,0.8);
	.addWeb_content{
		padding:0px 15px 10px 15px;
	}
	.title{
		font-size: 18px;
		color: #333;
		line-height: 30px;
		padding: 10px 20px;
		border-bottom: 1px #aaa solid;
		box-shadow: 0 5px 20px #aaa;
	}
	.ftitle{
		font-size: 16px;
		line-height: 2em;
		margin: 10px 0 6px 0;
	}
	.van-tag{
		margin: 6px 10px 4px 0;
		cursor: pointer;
	}
	.van-cell{
	   padding: 8px 10px;	
	   border-radius: 5px;
	}
	.btn_groups{
		margin-top: 20px;
		overflow: hidden;
		.van-button{
			border-radius: 5px;
			width: 47%;
		}
	}
	.wrapper {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 100%;
	}
	.block {
	  width: 84%;
	  max-width: 600px;
	  height: 600px;
	  padding: 20px 20px 30px 20px;
	  font-size: 14px;
	  background-color: #fff;
	  textarea{
		  height: 550px;
		  max-height: 550px;
		  min-height: 550px;
		  border: 0;
		  width: 100%;
		  max-width: 100%;
		  min-width: 100%;
		  overflow: auto;
		  background: #fff;
	  }
	}
}
</style>
